<template>
	<div ref="chartDom" class="chart" v-loading="loading" :style="props.style"></div>
</template>
<script lang="ts" setup>
import world from './json/world.json';
import { nameMap } from './nameMap.js';
import * as echarts from 'echarts';
import { querySummaryDistribution } from '/@/api/cx/list';
const props = defineProps({
	// 数据
	data: {
		type: [Object, String],
	},
	// 样式
	style: {
		type: String,
		default: 'width: 100%;height: 800px;',
	},
});
// 容器DOM
const chartDom = ref();
const loading = ref<boolean>(false);
// chart实例
let myChart = null;
// 数据
// const data = [
// 	{
// 		name: '青岛市',
// 		value: 208397.812,
// 	},
// 	{
// 		name: '阿富汗',
// 		value: 2,
// 	},
// 	{
// 		name: '安哥拉',
// 		value: 2,
// 	},
// 	{
// 		name: '阿尔巴尼亚',
// 		value: 2,
// 	},
// 	{
// 		name: '阿拉伯联合酋长国',
// 		value: 2,
// 	},
// 	{
// 		name: '阿根廷',
// 		value: 1,
// 	},
// 	{
// 		name: '亚美尼亚',
// 		value: 0,
// 	},
// 	{
// 		name: 'French Southern and Antarctic Lands',
// 		value: 0,
// 	},
// 	{
// 		name: '澳大利亚',
// 		value: 12,
// 	},
// 	{
// 		name: '奥地利',
// 		value: 4,
// 	},
// 	{
// 		name: '阿塞拜疆',
// 		value: 12,
// 	},
// 	{
// 		name: '布隆迪',
// 		value: 92,
// 	},
// 	{
// 		name: '比利时',
// 		value: 10,
// 	},
// 	{
// 		name: '贝宁',
// 		value: 95,
// 	},
// 	{
// 		name: '布基纳法索',
// 		value: 155,
// 	},
// 	{
// 		name: '孟加拉国',
// 		value: 1511,
// 	},
// 	{
// 		name: '保加利亚',
// 		value: 7,
// 	},
// 	{
// 		name: 'The Bahamas',
// 		value: 66,
// 	},
// 	{
// 		name: 'Bosnia and Herzegovina',
// 		value: 38,
// 	},
// 	{
// 		name: '白俄罗斯',
// 		value: 6994,
// 	},
// 	{
// 		name: '伯利兹',
// 		value: 30,
// 	},
// 	{
// 		name: 'Bermuda',
// 		value: 64,
// 	},
// 	{
// 		name: '玻利维亚',
// 		value: 7,
// 	},
// 	{
// 		name: '巴西',
// 		value: 14,
// 	},
// 	{
// 		name: '文莱',
// 		value: 27.223,
// 	},
// 	{
// 		name: '不丹',
// 		value: 716.939,
// 	},
// 	{
// 		name: '博茨瓦纳',
// 		value: 1969.341,
// 	},
// 	{
// 		name: 'Central African Republic',
// 		value: 4349.921,
// 	},
// 	{
// 		name: '加拿大',
// 		value: 34126.24,
// 	},
// 	{
// 		name: '瑞士',
// 		value: 7830.534,
// 	},
// 	{
// 		name: '智利',
// 		value: 17150.76,
// 	},
// 	{
// 		name: '中国',
// 		value: 1359821.465,
// 	},
// 	{
// 		name: 'Ivory Coast',
// 		value: 60508.978,
// 	},
// 	{
// 		name: '喀麦隆',
// 		value: 20624.343,
// 	},
// 	{
// 		name: 'Democratic Republic of the Congo',
// 		value: 62191.161,
// 	},
// 	{
// 		name: 'Republic of the Congo',
// 		value: 3573.024,
// 	},
// 	{
// 		name: '哥伦比亚',
// 		value: 46444.798,
// 	},
// 	{
// 		name: '哥斯达黎加',
// 		value: 4669.685,
// 	},
// 	{
// 		name: '古巴',
// 		value: 11281.768,
// 	},
// 	{
// 		name: 'Northern Cyprus',
// 		value: 1.468,
// 	},
// 	{
// 		name: '塞浦路斯',
// 		value: 1103.685,
// 	},
// 	{
// 		name: 'Czech Republic',
// 		value: 10553.701,
// 	},
// 	{
// 		name: '德国',
// 		value: 83017.404,
// 	},
// 	{
// 		name: '吉布提',
// 		value: 834.036,
// 	},
// 	{
// 		name: '丹麦',
// 		value: 5550.959,
// 	},
// 	{
// 		name: 'Dominican Republic',
// 		value: 10016.797,
// 	},
// 	{
// 		name: '阿尔及利亚',
// 		value: 37062.82,
// 	},
// 	{
// 		name: '厄瓜多尔',
// 		value: 15001.072,
// 	},
// 	{
// 		name: '埃及',
// 		value: 78075.705,
// 	},
// 	{
// 		name: '厄立特里亚',
// 		value: 5741.159,
// 	},
// 	{
// 		name: '西班牙',
// 		value: 46182.038,
// 	},
// 	{
// 		name: '爱沙尼亚',
// 		value: 1298.533,
// 	},
// 	{
// 		name: '埃塞俄比亚',
// 		value: 87095.281,
// 	},
// 	{
// 		name: '芬兰',
// 		value: 5367.693,
// 	},
// 	{
// 		name: '斐济',
// 		value: 860.559,
// 	},
// 	{
// 		name: 'Falkland Islands',
// 		value: 49.581,
// 	},
// 	{
// 		name: '法国',
// 		value: 63230.866,
// 	},
// 	{
// 		name: '加蓬',
// 		value: 1556.222,
// 	},
// 	{
// 		name: '英国',
// 		value: 62066.35,
// 	},
// 	{
// 		name: '格鲁吉亚',
// 		value: 4388.674,
// 	},
// 	{
// 		name: '加纳',
// 		value: 24262.901,
// 	},
// 	{
// 		name: '几内亚',
// 		value: 10876.033,
// 	},
// 	{
// 		name: '冈比亚',
// 		value: 1680.64,
// 	},
// 	{
// 		name: 'Guinea Bissau',
// 		value: 10876.033,
// 	},
// 	{
// 		name: '赤道几内亚',
// 		value: 696.167,
// 	},
// 	{
// 		name: '希腊',
// 		value: 11109.999,
// 	},
// 	{
// 		name: '格陵兰',
// 		value: 56.546,
// 	},
// 	{
// 		name: '危地马拉',
// 		value: 14341.576,
// 	},
// 	{
// 		name: 'French Guiana',
// 		value: 231.169,
// 	},
// 	{
// 		name: '圭亚那',
// 		value: 786.126,
// 	},
// 	{
// 		name: '洪都拉斯',
// 		value: 7621.204,
// 	},
// 	{
// 		name: '克罗地亚',
// 		value: 4338.027,
// 	},
// 	{
// 		name: '海地',
// 		value: 9896.4,
// 	},
// 	{
// 		name: '匈牙利',
// 		value: 10014.633,
// 	},
// 	{
// 		name: '印度尼西亚',
// 		value: 240676.485,
// 	},
// 	{
// 		name: '印度',
// 		value: 1205624.648,
// 	},
// 	{
// 		name: '爱尔兰',
// 		value: 4467.561,
// 	},
// 	{
// 		name: '伊朗',
// 		value: 240676.485,
// 	},
// 	{
// 		name: '伊拉克',
// 		value: 30962.38,
// 	},
// 	{
// 		name: '冰岛',
// 		value: 318.042,
// 	},
// 	{
// 		name: '以色列',
// 		value: 7420.368,
// 	},
// 	{
// 		name: '意大利',
// 		value: 60508.978,
// 	},
// 	{
// 		name: '牙买加',
// 		value: 2741.485,
// 	},
// 	{
// 		name: '约旦',
// 		value: 6454.554,
// 	},
// 	{
// 		name: '日本',
// 		value: 127352.833,
// 	},
// 	{
// 		name: '哈萨克斯坦',
// 		value: 15921.127,
// 	},
// 	{
// 		name: '肯尼亚',
// 		value: 40909.194,
// 	},
// 	{
// 		name: '吉尔吉斯斯坦',
// 		value: 5334.223,
// 	},
// 	{
// 		name: '柬埔寨',
// 		value: 14364.931,
// 	},
// 	{
// 		name: 'South Korea',
// 		value: 51452.352,
// 	},
// 	{
// 		name: 'Kosovo',
// 		value: 97.743,
// 	},
// 	{
// 		name: '科威特',
// 		value: 2991.58,
// 	},
// 	{
// 		name: 'Laos',
// 		value: 6395.713,
// 	},
// 	{
// 		name: '黎巴嫩',
// 		value: 4341.092,
// 	},
// 	{
// 		name: '利比里亚',
// 		value: 3957.99,
// 	},
// 	{
// 		name: '利比亚',
// 		value: 6040.612,
// 	},
// 	{
// 		name: '斯里兰卡',
// 		value: 20758.779,
// 	},
// 	{
// 		name: '莱索托',
// 		value: 2008.921,
// 	},
// 	{
// 		name: '立陶宛',
// 		value: 3068.457,
// 	},
// 	{
// 		name: '卢森堡',
// 		value: 507.885,
// 	},
// 	{
// 		name: '拉脱维亚',
// 		value: 2090.519,
// 	},
// 	{
// 		name: '摩洛哥',
// 		value: 31642.36,
// 	},
// 	{
// 		name: '摩尔多瓦',
// 		value: 103.619,
// 	},
// 	{
// 		name: '马达加斯加',
// 		value: 21079.532,
// 	},
// 	{
// 		name: '墨西哥',
// 		value: 117886.404,
// 	},
// 	{
// 		name: '马其顿',
// 		value: 507.885,
// 	},
// 	{
// 		name: '马里',
// 		value: 13985.961,
// 	},
// 	{
// 		name: '缅甸',
// 		value: 51931.231,
// 	},
// 	{
// 		name: '黑山共和国',
// 		value: 620.078,
// 	},
// 	{
// 		name: '蒙古',
// 		value: 2712.738,
// 	},
// 	{
// 		name: '莫桑比克',
// 		value: 23967.265,
// 	},
// 	{
// 		name: '毛利塔尼亚',
// 		value: 3609.42,
// 	},
// 	{
// 		name: '马拉维',
// 		value: 15013.694,
// 	},
// 	{
// 		name: '马来西亚',
// 		value: 28275.835,
// 	},
// 	{
// 		name: '纳米比亚',
// 		value: 2178.967,
// 	},
// 	{
// 		name: '新喀里多尼亚',
// 		value: 246.379,
// 	},
// 	{
// 		name: '尼日尔',
// 		value: 15893.746,
// 	},
// 	{
// 		name: '尼日利亚',
// 		value: 159707.78,
// 	},
// 	{
// 		name: '尼加拉瓜',
// 		value: 5822.209,
// 	},
// 	{
// 		name: '荷兰',
// 		value: 16615.243,
// 	},
// 	{
// 		name: '挪威',
// 		value: 4891.251,
// 	},
// 	{
// 		name: '尼泊尔',
// 		value: 26846.016,
// 	},
// 	{
// 		name: '新西兰',
// 		value: 4368.136,
// 	},
// 	{
// 		name: '阿曼',
// 		value: 2802.768,
// 	},
// 	{
// 		name: '巴基斯坦',
// 		value: 173149.306,
// 	},
// 	{
// 		name: '巴拿马',
// 		value: 3678.128,
// 	},
// 	{
// 		name: '秘鲁',
// 		value: 29262.83,
// 	},
// 	{
// 		name: '菲律宾',
// 		value: 93444.322,
// 	},
// 	{
// 		name: '巴布亚新几内亚',
// 		value: 6858.945,
// 	},
// 	{
// 		name: '波兰',
// 		value: 38198.754,
// 	},
// 	{
// 		name: '波多黎各',
// 		value: 3709.671,
// 	},
// 	{
// 		name: 'North Korea',
// 		value: 1.468,
// 	},
// 	{
// 		name: '葡萄牙',
// 		value: 10589.792,
// 	},
// 	{
// 		name: '巴拉圭',
// 		value: 6459.721,
// 	},
// 	{
// 		name: '卡塔尔',
// 		value: 1749.713,
// 	},
// 	{
// 		name: '罗马尼亚',
// 		value: 21861.476,
// 	},
// 	{
// 		name: '俄罗斯',
// 		value: 699999,
// 	},
// 	{
// 		name: '卢旺达',
// 		value: 10836.732,
// 	},
// 	{
// 		name: 'Western Sahara',
// 		value: 514.648,
// 	},
// 	{
// 		name: '沙特阿拉伯',
// 		value: 27258.387,
// 	},
// 	{
// 		name: '苏丹',
// 		value: 35652.002,
// 	},
// 	{
// 		name: 'South Sudan',
// 		value: 9940.929,
// 	},
// 	{
// 		name: '塞内加尔',
// 		value: 12950.564,
// 	},
// 	{
// 		name: 'Solomon Islands',
// 		value: 526.447,
// 	},
// 	{
// 		name: '塞拉利昂',
// 		value: 5751.976,
// 	},
// 	{
// 		name: '萨尔瓦多',
// 		value: 6218.195,
// 	},
// 	{
// 		name: 'Somaliland',
// 		value: 9636.173,
// 	},
// 	{
// 		name: '索马里',
// 		value: 9636.173,
// 	},
// 	{
// 		name: 'Republic of Serbia',
// 		value: 3573.024,
// 	},
// 	{
// 		name: '苏里南',
// 		value: 524.96,
// 	},
// 	{
// 		name: '斯洛伐克',
// 		value: 5433.437,
// 	},
// 	{
// 		name: '斯洛文尼亚',
// 		value: 2054.232,
// 	},
// 	{
// 		name: '瑞典',
// 		value: 9382.297,
// 	},
// 	{
// 		name: '斯威士兰',
// 		value: 1193.148,
// 	},
// 	{
// 		name: '叙利亚',
// 		value: 7830.534,
// 	},
// 	{
// 		name: '乍得',
// 		value: 11720.781,
// 	},
// 	{
// 		name: '多哥',
// 		value: 6306.014,
// 	},
// 	{
// 		name: '泰国',
// 		value: 66402.316,
// 	},
// 	{
// 		name: '塔吉克斯坦',
// 		value: 7627.326,
// 	},
// 	{
// 		name: '土库曼斯坦',
// 		value: 5041.995,
// 	},
// 	{
// 		name: 'East Timor',
// 		value: 10016.797,
// 	},
// 	{
// 		name: '特立尼达和多巴哥',
// 		value: 1328.095,
// 	},
// 	{
// 		name: '突尼斯',
// 		value: 10631.83,
// 	},
// 	{
// 		name: '土耳其',
// 		value: 72137.546,
// 	},
// 	{
// 		name: 'United Republic of Tanzania',
// 		value: 44,
// 	},
// 	{
// 		name: '乌干达',
// 		value: 33987.213,
// 	},
// 	{
// 		name: '乌克兰',
// 		value: 46,
// 	},
// 	{
// 		name: '乌拉圭',
// 		value: 3371.982,
// 	},
// 	{
// 		name: 'United States of America',
// 		value: 312247.116,
// 	},
// 	{
// 		name: '乌兹别克斯坦',
// 		value: 27769.27,
// 	},
// 	{
// 		name: '委内瑞拉',
// 		value: 23,
// 	},
// 	{
// 		name: '越南',
// 		value: 89047.397,
// 	},
// 	{
// 		name: '瓦努阿图',
// 		value: 23,
// 	},
// 	{
// 		name: 'West Bank',
// 		value: 13.565,
// 	},
// 	{
// 		name: '也门',
// 		value: 22763.008,
// 	},
// 	{
// 		name: '南非',
// 		value: 51452.352,
// 	},
// 	{
// 		name: '赞比亚',
// 		value: 13216.985,
// 	},
// 	{
// 		name: '津巴布韦',
// 		value: 13076.978,
// 	},
// ];
const data = ref([]);
const maxCount = ref(0);
const formData = reactive({
	max: '#2A74AF',
	min: '#ededed',
});
// 地图json数据
const mapJsonData = ref<any>({});
const initMap = (val: any) => {
	myChart = echarts.init(chartDom.value);
	echarts.registerMap('world', mapJsonData.value);
	let option = {
		tooltip: {},
		visualMap: {
			min: 0,
			max: maxCount.value,
			left: 26,
			bottom: 40,
			showLabel: !0,
			text: ['数量'],
			precision: 0,
			pieces: [
				{
					lt: 10,
					color: '#c5dcf2',
				},

				{
					gte: 10,
					lt: 100,
					color: '#9dc9e1',
				},
				{
					gte: 101,
					lt: 1000,
					color: '#6eb3d6',
				},
				{
					gte: 1001,
					lt: 10000,
					color: '#2170b3',
				},
				{
					gte: 10001,
					color: '#084495',
				},
			],
		},
		series: [
			{
				name: '研发人才规模',
				type: 'map',
				mapType: 'world',
				nameMap: nameMap,
				label: {
					show: val.isShow, // 显示名称
				},
				//roam: true,
				zoom: 1.1,
				center: undefined,
				// mapLocation: {
				// 	y: 60,
				// },
				itemStyle: {
					emphasis: { label: { show: true } },
					areaColor: formData.min,
					borderColor: '#FFFFFF',
					borderWidth: 0.5,
				},
				data: data.value,
			},
			// {
			//         type: 'effectScatter',
			//         coordinateSystem: 'geo',
			//         showEffectOn: 'render',
			//         rippleEffect: {
			//             period: 15,
			//             scale: 4,
			//             brushType: 'fill'
			//         },
			//         hoverAnimation: true,
			//         itemStyle: {
			//             normal: {
			//                 color: '#ffff',
			//                 shadowBlur: 10,
			//                 shadowColor: '#333'
			//             }
			//         },
			//         data: data
			//     }
		],
		// geo: {
		//         map: 'world',
		//         aspectScale: 0.75, //长宽比
		//         zoom: 1,
		//         roam: false,
		//         itemStyle: {
		//             normal: {
		//                 areaColor: '#013C62',
		//                 shadowColor: '#182f68',
		//                 shadowOffsetX: 0,
		//                 shadowOffsetY: 25
		//             },
		//             emphasis: {
		//                 areaColor: '#2AB8FF',
		//                 borderWidth: 0,
		//                 color: 'green',
		//                 label: {
		//                     show: false
		//                 }
		//             }
		//         }
		//     },
	};
	option && myChart.setOption(option);
	loading.value = false;
};

async function init(query: any) {
	loading.value = true;
	mapJsonData.value = [];
	if (query.area == '-1' || query.area == '') {
		mapJsonData.value = world;
	} else if (query.area == '1') {
		mapJsonData.value = await getMapJson('100000');
	} else {
		mapJsonData.value = await getMapJson(query.area);
	}
	querySummaryDistribution(query).then((res) => {
		if (res.code == 0) {
			data.value = res.data.datas;
			maxCount.value = Number(res.data.maxCount);
			let isShow: boolean = query.area !== '-1';
			initMap({ isShow: isShow });
		}
	});
}

async function getMapJson(mapName: string) {
	const url = `https://geo.datav.aliyun.com/areas_v3/bound/${mapName}_full.json`;
	const mapJson = await fetch(url).then((res) => res.json());
	return mapJson;
}
defineExpose({
	init,
});
</script>

<style lang="scss" scoped>
.wrap-map {
	height: 1000px;
	width: 100%;
}
</style>
